<template>
  <el-row>
    <el-col :span="4">
      <div class="grid-content ep-bg-purple"/>
      <el-tree :data="data" :props="defaultProps" @node-click="handleNodeClick"
               node-key="id"
      />
    </el-col>
    <el-col :span="18">
      <div class="grid-content ep-bg-purple-light"/>
      <el-button @click="addData">新增</el-button>
      <el-table :data="formData" style="width: 100%" stripe="true" tooltip-effect="dark">
        <el-table-column prop="id" label="工号" width="180"/>
        <el-table-column prop="name" label="姓名" width="80"/>
        <el-table-column prop="fullName" label="电话" width="150"/>
        <el-table-column prop="state" label="是否请假" width="100">
          <template #default="scope">

            <el-switch v-model=" scope.row.state "/>

          </template>
        </el-table-column>
        <el-table-column prop="reason" label="请假原因"   :show-overflow-tooltip="true"/>
        <el-table-column prop="completionNum" label=" 考勤天数" width="100">
        </el-table-column>
        <el-table-column prop="grade" label="白名单" width="100">
          <template #default="scope">

            <el-switch v-model=" scope.row.grade "/>

          </template>
        </el-table-column>

        <el-table-column fixed="right"  label="操作" width="120">
          <template #default="scope">
            <el-button link type="primary" size="small" @click="handleDelete(scope.row)"
            >删除</el-button
            >
            <el-button link type="primary" @click="handleEdit(scope.row)" size="small">编辑</el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
          v-model:current-page="page.current"
          v-model:page-size="page.size"
          :page-sizes="[5, 10, 30, 50]"
          :small="small"
          :disabled="disabled"
          :background="background"
          layout="total, sizes, prev, pager, next, jumper"
          :total="page.totle"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
      />
    </el-col>
  </el-row>


  <!--  对话框-->
  <el-dialog
      v-model="dialogVisible"
      title="新增数据"
      width="30%"

  >
    <el-form :model="addDataform" label-width="120px">
      <el-form-item label="姓名">
        <el-input v-model="addDataform.name"/>
      </el-form-item>
      <el-form-item label="职务">
        <el-input v-model="addDataform.fullName"/>
      </el-form-item>

      <el-form-item label=" 是否请假">
        <el-switch v-model="addDataform.state"/>
      </el-form-item>
      <el-form-item label="请假原因原因">
        <el-input v-model="addDataform.reason" type="textarea"/>
      </el-form-item>
      <el-form-item label="上月考勤数">
        <el-input v-model="addDataform.completionNum" type="number"/>
      </el-form-item>
      <el-form-item label=" 白名单">
        <el-switch v-model="addDataform.grade"/>
      </el-form-item>

    </el-form>


    <template #footer>
      <span class="dialog-footer">
        <el-button @click="dialogVisible = false">取消</el-button>
        <el-button type="primary" @click="subData ">
          确定
        </el-button>
      </span>
    </template>
  </el-dialog>
</template>
<script lang="ts" setup>
import _axios, {dataUrl} from "@/http/request";
import {ref} from "vue";
import { ElMessage } from 'element-plus'

const dialogVisible = ref(false)
const data = ref([])
const formData = ref([])
const defaultProps = {
  children: 'children',
  label: 'name',
}
const page = ref({
  size: 5, current: 0, id: '', totle:0
})
const addDataform = ref({
  treeId: '',
  name: '',
  fullName: '',
  state: true,
  reason: '',
  completionNum: '',
  grade: true,

})
const handleSizeChange = (val: number) => {
  console.log(`${val} items per page`)
  page.value.size=val
  init()
}
const handleCurrentChange = (val: number) => {
  console.log(`current page: ${val}`)
  page.value.current=val
  init()
}

const handleNodeClick = (data: any) => {
  console.log(data.pid)
  if (data.pid != 0) {
    page.value.id = data.id
    addDataform.value.treeId = data.id
  init()
  }
}
function init(){
  _axios.post(dataUrl + "/inforation-data/get", page.value).then((res) => {
    formData.value = res.data.data
    // page.value.current = res.data.data.current
    // page.value.totle = res.data.data.totle

    page.value.totle = res.data.totle
    console.log(res.data.total)
  })
}

_axios.post(dataUrl + "/tree-data/getTreeDataForTree", {}).then((res => {
  data.value = res.data.data
  console.log(res)
}))



function addData() {
  dialogVisible.value = true
}

function subData() {
  dialogVisible.value = false
  _axios.post(dataUrl + "/inforation-data/save", addDataform.value).then((res) => {
    console.log(res)
    if (res.data.code==200){
      ElMessage({
        message: res.data.message,
        type: 'success',
      })
      init()
    }else{
      ElMessage({
        message: res.data.message,
        type: 'warning',
      })
    }
  })
}


function handleDelete(e:any){
  console.log(e)
  _axios.post(dataUrl+"/inforation-data/delete",{id:e.id}).then((res)=>{
    if (res.data.code==200){
      ElMessage({
        message: res.data.message,
        type: 'success',
      })
      init()
    }
  })
}
function handleEdit(e:any){
  dialogVisible.value = true
  addDataform.value=e
  console.log(e)

}
</script>
